<template>
  <div v-loading="loading" element-loading-text="亲，别着急，马上就好哦~" element-loading-spinner="el-icon-loading">
    <el-row class="top_row">
      <el-col :span="24">
        <div class="top_title">
          <div class="left_add">
            <el-button type="danger" @click="$router.push('/System/TypeEdit')" size="mini" icon="el-icon-circle-plus">
              新增
            </el-button>
          </div>
          <div class="right_sel">
            <el-input size="mini" v-model="SelType" placeholder="查找...">
              <el-button slot="append" @click="SelDt" icon="el-icon-search" style="width:50px;"></el-button>
            </el-input>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div>
          <el-table :data="TypeDt" :row-class-name="RowCls">
            <el-table-column prop="pk_TypeID" width="100" label="ID" :sortable="true"></el-table-column>
            <el-table-column prop="TypeName_CHS" width="220" label="名称"></el-table-column>
            <el-table-column prop="ID" width="170" align="left" label="类型值"></el-table-column>
            <el-table-column prop="TableName" label="表名" width="260"></el-table-column>
            <el-table-column prop="TypeName_CHS" label=" 显示">
              <template slot-scope="scope">
                <span :style="'color:'+scope.row.Visual">{{scope.row.Visual}}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" align="center" min-width="300">
              <template slot-scope="scope">
                <el-button type="primary"
                  @click="$router.push({path:'/System/TypeEdit',query:{pk_TypeID:scope.row.pk_TypeID}})" size="mini"
                  icon="el-icon-edit-outline">修改
                </el-button>
                <el-popconfirm @onConfirm="Del(scope.$index,scope.row.pk_TypeID)" style="margin-left:10px;"
                  title="确定删除此类型?">
                  <el-button slot="reference" type="danger" size="mini" icon="el-icon-delete">删除</el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<style>
.el-table .success-row {
  background: #f0f9eb;
}
</style>
<style lang="scss" scoped>
.top_row {
  border-bottom: 1px solid #f7f7f7;
  padding-bottom: 10px;
  .top_title {
    .left_add {
      float: left;
    }
    .right_sel {
      float: right;
    }
  }
}
</style>
<script>
export default {
  data () {
    return {
      TypeDt: [],
      SelType: "",
      loading: false
    }
  },
  mounted () {
    this.loading = true
    this.SelDt();
  },
  methods: {
    RowCls ({ row, rowIndex }) {
      if (row.ParentID === 0) {
        return "success-row"
      }
    },
    //新增
    Add () {
      this.$router.push({
        path: '/System/MenuEdit',
        query: {
          Type: 'Add'
        }
      })
    },
    //新增子菜单
    AddChildren (id) {
      this.$router.push({
        path: '/System/MenuEdit',
        query: {
          Type: 'Add',
          pk_Menu: id
        }
      })
    },
    //编辑
    Edit (id) {
      this.$router.push({
        path: "/System/MenuEdit",
        query: {
          pk_Menu: id,
          Type: 'Edit'
        }
      })
    },
    //设置
    SetRole (pk_Name, RoleName_CHS) {
      this.$router.push({
        path: '/Role/List',
        query: {
          pk_Name,
          RoleName_CHS
        }
      })
    },
    //删除
    Del (index, pk_TypeID) {
      this.$axios({
        url: '/HrApi/TypeMange/DelType',
        method: 'POST',
        data: this.$Qs.stringify({
          pk_TypeID
        })
      }).then(res => {
        if (!res.data.code) {
          this.$message.success(res.data.msg)
          this.SelDt();
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    //模糊查询
    SelDt () {

      this.$axios({
        url: '/HrApi/TypeMange/GetTypeListAll',
        method: 'GET',
        params: {
          Term: this.SelType
        }
      }).then(res => {
        this.loading = false;
        if (!res.data.code) {
          this.TypeDt = res.data.data//此处数据elementui表格渲染慢，不是ajax请求慢，ajax请求时间大概:< 0.5s，待优化。可选：分页、懒加载、pl-table
        } else {
          this.$message.error(res.data.msg)
        }
      })
    }
  },
  watch: {
    SelType (n) {
      if (n === "") {
        this.SelDt()
      }
    }
  }
}
</script>